<template>
  <div class="bpmn-panel">
    <el-container>
      <el-header height="45px">
        <div
          class="config-tab"
          :class="{ active: configTab == 'node' }"
          @click="handleConfigSelect('node')"
        >
          节点属性
        </div>
        <div
          class="config-tab"
          :class="{ active: configTab == 'process' }"
          @click="handleConfigSelect('process')"
        >
          流程属性
        </div>
      </el-header>
      <el-main>
        <node-property-panel
          ref="nodePanel"
          v-if="configTab == 'node'"
          :modeler="modeler"
          @modifyConfigTab="modifyConfigTab"
          :nodeElement="nodeElement"
          :formData="formData"
          :details="details"
        ></node-property-panel>
        <process-property-panel
          ref="processPanel"
          v-if="configTab == 'process'"
          :modeler="modeler"
          :process-data="process"
          :element="element"
          @dynaKeyChange="dynaKeyChange"
          :details="details"
        ></process-property-panel>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import NodePropertyPanel from "./NodePropertyPanel";
import ProcessPropertyPanel from "./ProcessPropertyPanel";

export default {
  name: "index",
  data() {
    return {
      configTab: "node",
      element: {},
      nodeElement: {},
      formData: {
        type: "",
        id: "",
        name: "",
        approveusername: "",
        approvetype: "",
        approverolecode: "",
        votetype: "",
        rollbackrule: "",
        consignable: "",
        multiinstance_type: "",
        // 动态参数
        dynavarkey: "",
        dynavarvalue: "",
        formKey: "",
        conditionExpression: "",
      },
      typeId: "",
      details: {},
    };
  },
  props: {
    modeler: {
      type: Object,
      required: true,
    },
    process: {
      type: Object,
      required: true,
    },
    // toFormStates: {
    //   type: Object,
    //   required: true,
    // },
    // 节点回显数据list
    dataDetails: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    // this.handleModeler();
  },
  watch: {
    typeId() {
      if (this.configTab == "node") {
        setTimeout(() => {
          this.$refs.nodePanel.dynaKeyChange(this.typeId);
        }, 50);
      }
    },
  },
  methods: {
    // 动态参数
    dynaKeyChange(val) {
      this.typeId = val;
    },
    //
    handleConfigSelect(value) {
      this.configTab = value;
    },
    handleModeler() {
      this.details = {}
      this.formData = {};
      (this.element = {}), (this.nodeElement = {});
      this.configTab = "node";
      const _this = this;
      this.modeler.on("root.added", (e) => {
        let element = e.element;
        let flowElements = element.businessObject.flowElements;
        if (this.isImplicitRoot(element)) {
          return;
        }
        this.element = element;
      });
      this.modeler.on("commandStack.changed", () => {
        _this.modeler.saveXML({ format: true }, function (err, xml) {
          _this.$emit("updateXml", xml);
        });
      });
      this.modeler.on("selection.changed", (e) => {
        const element = e.newSelection[0];
        if (!element) {
          return;
        }
        this.modifyConfigTab(element);
        this.handleFormData(element);
      });
      this.modeler.on("element.changed", (e) => {
        const { element } = e;
        if (!element) {
          return;
        }
        this.handleFormData(element);
      });
      this.modeler.on("element.click", (e) => {
        const { element } = e;
        let businessObject = element.businessObject;
        if (element.type == this.modeler._definitions.rootElements[0].$type) {
          this.modifyConfigTab(0);
        } else {
          this.modifyConfigTab(1);
          if (this.typeId) {
            setTimeout(() => {
              this.$refs.nodePanel.dynaKeyChange(this.typeId);
            }, 50);
          }
        }
      });
    },
    isImplicitRoot(element) {
      return element.id === "__implicitroot";
    },
    modifyConfigTab(element) {
      let configTab = "node";
      if (!element) {
        configTab = "process";
      }
      this.configTab = configTab;
    },
    handleFormData(element) {
      if (!element.id) {
        return;
      }
      let businessObject = element.businessObject;
      for (let i = 0; i < this.dataDetails.length; i++) {
        if (businessObject.id == this.dataDetails[i].nodeId) {
          this.details = Object.assign({}, this.details, this.dataDetails[i]);
        }
      }
      this.formData = {
        type: element.type,
        id: businessObject.id,
        name: businessObject.name,
        // formkey: businessObject.$attrs.formkey,
        approveusername: businessObject.$attrs.approveusername
          ? businessObject.$attrs.approveusername.split(",")
          : [],
        approvetype: businessObject.$attrs.approvetype,
        approverolecode: businessObject.$attrs.approverolecode
          ? businessObject.$attrs.approverolecode.split(",")
          : [],
        votetype: businessObject.$attrs.votetype,
        rollbackrule: businessObject.$attrs.rollbackrule,
        consignable: businessObject.$attrs.consignable,
        multiinstance_type: businessObject.$attrs.multiinstance_type,
        approveorgancode: businessObject.$attrs.approveorgancode
          ? businessObject.$attrs.approveorgancode.split(",")
          : [],
        // 动态参数
        dynavarkey: businessObject.$attrs.dynavarkey,
        dynavarvalue: businessObject.$attrs.dynavarvalue,
        conditionExpression: businessObject.conditionExpression
          ? businessObject.conditionExpression.body
          : "",
        start_node_end_listener: businessObject.$attrs.start_node_end_listener,
        task_start_listener: businessObject.$attrs.task_start_listener,
        end_node_start_listener: businessObject.$attrs.end_node_start_listener,
        task_end_listener: businessObject.$attrs.task_end_listener,
      };
      this.nodeElement = element;
    },
  },
  components: {
    NodePropertyPanel,
    ProcessPropertyPanel,
  },
};
</script>

<style scoped>
.bpmn-panel {
  width: 350px;
  border: 1px solid #eeeeee;
  padding: 0 5px;
}

.el-header {
  border-bottom: solid 2px #e4e7ed;
  padding: 0;
}

.config-tab {
  height: 43px;
  line-height: 43px;
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
}

.config-tab.active {
  border-bottom: solid 2px #409eff;
}
</style>